<template>
  <div>
    <van-nav-bar
      title="课程列表"
      left-text="返回"
      right-text="按钮"
      left-arrow
      
      />
      <van-search     @search="onSearch" v-model="searchText" placeholder="请输入搜索关键词" />
      <van-dropdown-menu>
        <van-dropdown-item @change="dropChange" v-model="value1" :options="option1" />
        <van-dropdown-item @change="dropChange" v-model="value2" :options="option2" />
      </van-dropdown-menu>
 <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="100"
      :immediate-check="false"
    >
        <div class="courselist">
          <div class="courselist_one" @click="turnInfo(item.ID)" v-for="(item,index) in courseList" :key="index">
              <img :src="'http://localhost:3000'+item.Cpic" alt="">
              <div>
                <h1 class="cname">{{item.Cname}}</h1>
                <h3 class="cdes">{{item.Cdescribe}}</h3>
                <h2 class="cprice">￥{{item.Cprice}}</h2>
              </div>
          </div>
        </div>
      </van-list>
   </van-pull-refresh>
    <div style="padding-bottom:50px;"></div>
  </div>
</template>
<script>
import {getCourseList,getCategory} from '../../api/home'
export default {
  data(){
    return{
      isLoading:false,//下拉是否加载中
      searchText:"",
      loading:false, //上拉是否加载中
      finished:false,//是否无数据
      pageStart:1,
      count:0,
      pageSize:3,
      courseList:[],
      value1: 0, //下拉菜单1 
      value2: '',//下拉菜单2
      option1: [
        { text: '全部', value: 0 },
        { text: '前端', value: "1" },
        { text: '后端', value: "2"},
        { text: '视觉设计', value: "3" }
      ],
      option2: [
        { text: '所有价格', value: '' },
        { text: '免费', value: '1' },
        { text: '付费', value: '2' }
      ],
    }
  },
  created(){
    this.searchText=this.$route.query.seaText;
    this.getCourse();
    this.getCate();
  },
  methods: {
    turnInfo(ID){
      // 跳转到课程购买页
      this.$router.push({name:"coursebuy",query:{ID:ID}})
    },
    onRefresh(){
      // 开始下拉
      this.pageStart=1;
      this.courseList=[];//下拉将数据重置为[]
      this.isLoading=true; //加载中
      this.getCourse();//获取课程列表
      this.isLoading=false;//非加载状态
    },
    onLoad(){ //上拉加载事件

        this.loading=true; //加载中
        console.log("上拉加载")
        this.getCourse();
        setTimeout(()=>{
             this.loading=false; //加载完成
             this.pageStart++
            console.log(this.pageStart)
            // // 大于最大页数无数据加载
            console.log(this.count)
            if(this.pageStart>Math.ceil(this.count/10)){
                this.finished=true;
            }
        },500)
    },
    // 获取课程列表接口
    async getCourse(){
      console.log(this.pageStart)
      var res=await getCourseList({
          pageStart:this.pageStart,//当前页码
          searchText:this.searchText,//搜索字段
          CategoryTwo:this.value1, //分类
          CpriceId:this.value2//价格
        })
      console.log(res)
      this.courseList=this.courseList.concat(res.data.list);
      this.count=res.data.count;
      this.pageSize=res.data.pageSize;
    },
    dropChange(){ //下拉菜单改变 从新获取课程数据
      this.courseList=[];
      this.getCourse();
    },
    onSearch(){ //搜索
       this.courseList=[];
       this.getCourse();
       this.searchText=""
    },
    // 获取课程分类数据
    async getCate(){
      var res=await getCategory({})
      console.log(res)
    }
  },
}
</script>
<style lang="less">
  .courselist_one{
    width: 100%;
    background: white;
    border-bottom:1px solid black ;
    display: flex;
    height: 160px;
    align-items: center;
    img{
      width: 130px;
      height: 130px;
      margin-left: 30px;
      margin-right: 30px;
    }
    >div{
      .cname{
        margin: 10px 0;
      }
      .cdes{
        margin:20px 0 ;
      }
      .cprice{
        color: red;
      }
    }
  }
</style>